<template>
  <div class="container">
    <div class="video-container">
      <div v-if="isVideoAvailable1" class="video-wrapper">
        <img class="video-stream" :src="videoSrc1" />
      </div>
      <div v-else class="video-placeholder">
        <p class="wait-font">等待视频接入</p>
        <div class="loading">
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
        </div>
      </div>

      <div v-if="isVideoAvailable2" class="video-wrapper">
        <img class="video-stream" :src="videoSrc2" />
      </div>
      <div v-else class="video-placeholder">
        <p class="wait-font">等待视频接入</p>
        <div class="loading">
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
        </div>
      </div>

      <div v-if="isVideoAvailable3" class="video-wrapper">
        <img class="video-stream" :src="videoSrc3" />
      </div>
      <div v-else class="video-placeholder">
        <p class="wait-font">等待视频接入</p>
        <div class="loading">
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
        </div>
      </div>

      <div v-if="isVideoAvailable4" class="video-wrapper">
        <img class="video-stream" :src="videoSrc4" />
      </div>
      <div v-else class="video-placeholder">
        <p class="wait-font">等待视频接入</p>
        <div class="loading">
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
        </div>
      </div>

      <div v-if="isVideoAvailable5" class="video-wrapper">
        <img class="video-stream" :src="videoSrc5" />
      </div>
      <div v-else class="video-placeholder">
        <p class="wait-font">等待视频接入</p>
        <div class="loading">
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
        </div>
      </div>

      <div v-if="isVideoAvailable6" class="video-wrapper">
        <img class="video-stream" :src="videoSrc6" />
      </div>
      <div v-else class="video-placeholder">
        <p class="wait-font">等待视频接入</p>
        <div class="loading">
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
        </div>
      </div>

    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { someVariable } from '../../store/modules/globalurl';

const videoSrc1 = ref('');
const videoSrc2 = ref('');
const videoSrc3 = ref('');
const videoSrc4 = ref('');
const videoSrc5 = ref('');
const videoSrc6 = ref('');
// const videoSrc7 = ref('');
// const videoSrc8 = ref('');
// const videoSrc9 = ref('');

const isVideoAvailable1 = ref(false);
const isVideoAvailable2 = ref(false);
const isVideoAvailable3 = ref(false);
const isVideoAvailable4 = ref(false);
const isVideoAvailable5 = ref(false);
const isVideoAvailable6 = ref(false);
// const isVideoAvailable7 = ref(false);
// const isVideoAvailable8 = ref(false);
// const isVideoAvailable9 = ref(false);

let ws1: WebSocket | null = null;
let ws2: WebSocket | null = null;
let ws3: WebSocket | null = null;
let ws4: WebSocket | null = null;
let ws5: WebSocket | null = null;
let ws6: WebSocket | null = null;

const startWebSocket = (ws: WebSocket | null, src: string, isVideoAvailable: any, videoSrc: any) => {
  ws = new WebSocket(src);
  ws.binaryType = 'arraybuffer';

  ws.onopen = () => {
    console.log(`WebSocket connected`);
    isVideoAvailable.value = true;
  };

  ws.onmessage = (event) => {
    const arrayBuffer = event.data;
    if (arrayBuffer) {
      const blob = new Blob([arrayBuffer], { type: 'image/jpeg' });
      const url = URL.createObjectURL(blob);
      videoSrc.value = url;
      setTimeout(() => URL.revokeObjectURL(url), 100);
    } else {
      console.error('Received empty ArrayBuffer');
    }
  };

  ws.onclose = (event) => {
    console.error('WebSocket closed:', event);
    isVideoAvailable.value = false;
  };

  ws.onerror = (error) => {
    console.error('WebSocket error:', error);
    isVideoAvailable.value = false;
  };
};

// const something = 'jpvrbm.natappfree.cc';

onMounted(() => {
  startWebSocket(ws1, `ws://${someVariable}/ws/monitor/1/`, isVideoAvailable1, videoSrc1);
  startWebSocket(ws2, `ws://${someVariable}/ws/monitor/2/`, isVideoAvailable2, videoSrc2);
  startWebSocket(ws3, `ws://${someVariable}/ws/monitor/3/`, isVideoAvailable3, videoSrc3);
  startWebSocket(ws4, `ws://${someVariable}/ws/monitor/4/`, isVideoAvailable4, videoSrc4);
  startWebSocket(ws5, `ws://${someVariable}/ws/monitor/5/`, isVideoAvailable5, videoSrc5);
  startWebSocket(ws6, `ws://${someVariable}/ws/monitor/6/`, isVideoAvailable6, videoSrc6);
  // startWebSocket(ws7, `ws://${someVariable}/ws/monitor/7/`, isVideoAvailable7, videoSrc7);
  // startWebSocket(ws8, `ws://${someVariable}/ws/monitor/8/`, isVideoAvailable8, videoSrc8);
  // startWebSocket(ws9, `ws://${someVariable}/ws/monitor/9/`, isVideoAvailable9, videoSrc9);
});

onBeforeUnmount(() => {
  if (ws1) ws1.close();
  if (ws2) ws2.close();
  if (ws3) ws3.close();
  if (ws4) ws4.close();
  if (ws5) ws5.close();
  if (ws6) ws6.close();
});
</script>

<style scoped>


.video-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
}

.video-stream {
  width: 100%;
  height: 350px;
}

.video-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 600px;
  height: 350px;
  background-color: #3c5287;
  color: #333;
  font-size: 1.2em;
}

.loading {
  display: flex;
}

.dot {
  position: relative;
  width: 1em;
  height: 1em;
  margin: 0.8em;
  border-radius: 50%;
  background-color: var(--dot-color);
  animation: wave 2s ease-out infinite;
}

.dot:nth-child(1) {
  --dot-color: #7ef9ff;
  animation-delay: 0.2s;
}

.dot:nth-child(2) {
  --dot-color: #89cff0;
  animation-delay: 0.4s;
}

.dot:nth-child(3) {
  --dot-color: #4682b4;
  animation-delay: 0.6s;
}

.dot:nth-child(4) {
  --dot-color: #0f52ba;
  animation-delay: 0.8s;
}

.dot:nth-child(5) {
  --dot-color: #000080;
  animation-delay: 1s;
}

@keyframes wave {
  50%,
  75% {
    transform: scale(2.5);
  }
  80%,
  100% {
    opacity: 0;
  }
}

.wait-font {
  color: white;
  font-size: 36px;
}
</style>
